<template>
  <div class="headerTop">
    <el-row class="headerTop-inner">
      <el-col :span="3">
        <div class="topLeft" :class="{ 'topLeftActive': activeTitle == 1 }"  @click="handlePath('/applicationScreen')">
          应用服务抗信息泄露
        </div>
      </el-col>
      <el-col :span="3">
        <div class="topLeft" :class="{ 'topLeftActive': activeTitle == 2 }" @click="handlePath('/networkScreen')">
          网络设备抗定位
        </div>
      </el-col>
      <el-col :span="3">
        <div class="topLeft" :class="{ 'topLeftActive': activeTitle == 3 }" @click="handlePath('/userPositioningScreen')">
          网络用户抗定位
        </div>
      </el-col>
      <el-col :span="6">
        <div class="topTitle" @click="handlePath('/largeScreen')">
          跨空间关联映射对抗系统
        </div>
      </el-col>
      <el-col :span="3">
        <div class="topRight" :class="{ 'topRightActive': activeTitle == 4 }" @click="handlePath('/deviceHomeScreen')">
          网络设备抗归属
        </div>
      </el-col>
      <el-col :span="3">
        <div class="topRight" :class="{ 'topRightActive': activeTitle == 5 }" @click="handlePath('/userIdentityScreen')">
          网络用户抗身份识别
        </div>
      </el-col>
      <el-col :span="3">
        <!-- <div class="topRight" :class="{ 'topRightActive': activeTitle == 6 }" @click="handlePath('/cameraPositionAnalysis')">
          网络摄像头位置分析
        </div> -->
        <!-- <div class="topRight1" @click="handlePath('/homelogin')">
          昵称:{{userName}}
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
  props: {
    activeTitle: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      userName: '',
    }
  },
  mounted() {
    this.userName = Cookies.get('username');
  },
  methods: {
    handlePath(params){
      this.$router.push(params)
    }
  }
}
</script>
<style lang="scss" scoped>
.headerTop {
  background: url("~@/assets/xd/new/top_new.png") no-repeat center center;
  background-color: transparent;
  background-size: 100%;
  height: 95px;
  line-height: 95px;
  color: #60A9FF;

  .topTitle {
    text-align: center;
    width: 100%;
    height: 80px;
    /* margin-top: 10px; */
    line-height: 80px;
    font-size: vw(33);
    font-weight: 400;
    color: #ffffff;
      cursor: pointer;
  }

  .topLeft {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: url("~@/assets/xd/new/left.png") no-repeat center center;
    background-size: 100% 100%;
    margin-top: 20px;
    font-size: vw(18);
    color: #fff;
    font-weight: 400;
    cursor: pointer;
  }

  .topLeft:hover,
  .topLeftActive {
    background: url("~@/assets/xd/new/left1.png") no-repeat center center;
  }

  .topRight {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: url("~@/assets/xd/new/right.png") no-repeat center center;
    background-size: 100% 100%;
    margin-top: 20px;
    font-size: vw(18);
    font-weight: 400;
    color: #fff;
    cursor: pointer;
  }

  .topRight1 {
    line-height: 70px;
    height: 48px;
    font-size: vw(18);
    font-weight: 400;
    color: #fff;
    position: absolute;
    right: 25px;

  }

  .topRight1:hover,
  .topRight1Active {
    color: #f0a82d;
    cursor: pointer;
  }
  .topRight:hover,
  .topRightActive {
    background: url("~@/assets/xd/new/right1.png") no-repeat center center;
  }
}

.headerTop-inner{
  height: 95px;

}
</style>
